var a1 = document.getElementById("a1");
var a2 = document.getElementById("a2");
var b1 = document.getElementById("b1");
var b2 = document.getElementById("b2");

a1.onmouseover = hint;
a2.onmouseover = hint;
b1.onmouseover = hint;
b2.onmouseover = hint;

var show = document.getElementById('show');
var refurbish = document.getElementById('refurbish');
refurbish.onclick = function () {
    location.reload();
}
async function buOnclick() {
    if (a1.value == '' || a2.value == '' || b1.value == '' || b2.value == '') {
        alert("请完整输入！");
        return;
    }
    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 0;

    try{
        x1 = eval(a1.value);
        y1 = eval(a2.value);
        x2 = eval(b1.value);
        y2 = eval(b2.value);
    }catch(error){
        alert("输入格式不正确，请重新输入！");
        return;
    }
    var xx1 = x1 + x2;
    var yy1 = y1 + y2;
    context.save();

    var bb = Math.max(Math.abs(x1), Math.abs(y1), Math.abs(x2), Math.abs(y2),
        Math.abs(xx1), Math.abs(yy1));
    checkAxes(mycanvas, context, bb, bb, 2);

    context.lineWidth = 3;
    context.fillStyle = "red";
    context.font = "bold italic 20pt Times new roman";
    await drowVector3(context, x1, y1);
    await context.fillText('a', x1 * c1, -y1 * c1);
    await drowVector3(context, x2, y2);
    await context.fillText('b', x2 * c1, -y2 * c1);
    drowDashedLine(context, x1, y1, xx1, yy1);
    drowDashedLine(context, x2, y2, xx1, yy1);
    await Sleep(200);
    drow2Dparallelogram(context, x1, y1, x2, y2);
    await context.fillText('D', xx1 * c1 / 2, -yy1 * c1 / 2);
    context.restore();
}
show.addEventListener('click', buOnclick);
drow2DAxes(context);